export default {
  install: (app) => {
    const sideArr = ['right', 'left', 'top', 'bottom']
    const errmsg = 'resizable needs string value of: ' + sideArr
    const minSize = 40
    const dragSize = 10

    app.directive('resizer', {
      mounted(el, binding, vnode, oldVnode) {
        const handle = (e)=>{
          binding.value && binding.value(e)
        }
        const object = document.createElement('object')
        object.setAttribute('aria-hidden', 'true')
        object.setAttribute('tabindex', -1)
        object.onload = handle
        object.type = 'text/html'
        object.data = 'about:blank'
        object.style.width= '100%'
        el.appendChild(object)
        object.contentDocument.defaultView.addEventListener('resize', handle) 
      }
    })

    app.directive('resizable', {
      mounted(el, binding, vnode, oldVnode) {
        const dragable = {}
        const oriCur = el.style.cursor
        const sides = binding.value.replace(' ', '').split(',')
        let dragSide = ''
        let dragging = false
        
        if (sides.length === 0) { 
          throw errmsg
        }
        for (let i = 0; i < sides.length; i++) {
          if (sideArr.indexOf(sides[i]) < 0 ) { 
            throw errmsg
          }
          dragable[sides[i]] = true
        }

        el.addEventListener('mousemove', (e) => {
          if (dragging) return
          if ( e.target != el ) {
            el.style.cursor = oriCur
            return
          };
          if (dragable['right'] && Math.abs(el.offsetLeft + el.offsetWidth - e.pageX) < dragSize) {
            el.style.cursor = 'ew-resize'
            dragSide = 'right'
          }
          else if (dragable['left'] && el.offsetLeft < e.pageX &&  e.pageX < el.offsetLeft + dragSize) {
            el.style.cursor = 'ew-resize'
            dragSide = 'left'
          }
          else if (dragable['top'] && e.offsetY < dragSize) {
            el.style.cursor = 'ns-resize'
            dragSide = 'top' 
          }
          else if (dragable['bottom'] && el.offsetHeight - e.offsetY < dragSize) {
            el.style.cursor = 'ns-resize'
            dragSide = 'bottom'
          }
          else {
            el.style.cursor = oriCur
            dragSide = ''
          }
        })

        el.addEventListener('mousedown', (e) => {
          if ( !dragSide ) return
          if ( e.target != el ) return;

          dragging= true 
          const cstyle = window.getComputedStyle(el)
          const width = Number.parseInt(cstyle.width)
          const height = Number.parseInt(cstyle.height)
          const elW = width > 0 ? width : el.offsetWidth
          const elH = height > 0 ? height : el.offsetHeight
          const clientX = e.clientX 
          const clientY = e.clientY
          const movefun = (e) => {
            e.preventDefault()
            if (dragSide === 'right' && (e.clientX > clientX || el.offsetWidth >= minSize)) {
              const width = elW + (e.clientX - clientX) + 'px'
              el.style.width = width
              //vnode.$emit('sizeChange', width)
            }
            else if (dragSide === 'left' && (e.clientX < clientX || el.offsetWidth >= minSize)) {
              const width =  elW + (clientX - e.clientX) + 'px'
              el.style.width = width
              //vnode.$emit('sizeChange', width)
            }
            else if (dragSide === 'top' && (e.clientY < clientY || el.offsetHeight >= minSize)) {
              const width =  elH + (clientY - e.clientY) + 'px'
              el.style.height = width
              //vnode.$emit('sizeChange', width)
            }
            else if (dragSide === 'bottom' && (e.clientY > clientY || el.offsetHeight >= minSize)) {
              const width =  elH + (e.clientY - clientY) + 'px'
              el.style.height = width
              //vnode.$emit('sizeChange', width)
            }
          }
          const removefun = () => {
            dragging= false
            document.removeEventListener('mousemove', movefun)
            document.removeEventListener('mouseup', removefun)
          }

          document.addEventListener('mousemove', movefun)
          document.addEventListener('mouseup', removefun) 
        })
      }
    })
  }
}